<template>
	<div id="rege">
			<div class="regetu">
				<img src="http://p1.music.126.net/GhhuF6Ep5Tq9IEvLsyCN7w==/18708190348409091.jpg"/>
			</div>
		<div class="regewz" v-for="(r,i) in privileges" :key="i" @click="tobf(r.id)">
			<p>{{r.name}}</p>
			<span v-for="(s,i) in r.ar" :key="i">{{s.name}}</span>--<span>{{r.al.name}}</span>
			<div class="icon">
     			  <i class="iconfont icon-bofang"></i>
     		</div>
		</div>
	</div>
</template>

<script>
	import axios from "axios";
export default{
	data(){
		return{
			privileges:[]
		}
	},
	mounted(){
		var that=this
				axios.get("http://netease.bluej.cn/top/list?timestamp=555",{
					params:{
						idx:1
					}
				}).then(function(res){
					console.log(res);
					for(var i=0;i<20;i++){
						that.privileges.push(res.data.playlist.tracks[i]) ;
					}
				})
	},
   methods:{
	
	tobf(bfId){
      this.$router.push( { path:"/bofang",query:{bfid : bfId} } );
   		}
	}
}
</script>

<style lang="scss">
	.regetu{
		width: 100%;
		height: 40vw;
		img{
		width: 100%;
		height: 100%;
	}
	}
	.regewz{
			padding: 10px 5px;
			border-bottom: 1px solid #EEEFF0;
			.icon{
					display: inline-block;
					position: absolute;
					right: 20px;
					margin-top: -15px;
				}
				.icon-bofang{
						font-size: 25px;
						opacity: 0.4;
					}
	}
	
</style>